<template>
    <view class="popup">
        <view class="popup1" @tap="close"></view>
        <view class="popup2">
            <view class="popup4">
                <view class="popup5">
                    <view class="txt_up">
                        自定义时间
                        <view class="gb_txt" @tap="close">
                            <image src="/static/close@2x.png" mode="widthFix" class="close"></image>
                        </view>
                    </view>
                </view>
                <view class="kdcon">
                    <view class="kdtxt">
                        <picker mode="date" :value="date" start="2023-01-01" :end="time" @change="bindDateChange">
                            <view class="picker" :style="date ? 'color:#222' : ''">
                                {{ date ? date : '请选择开始时间' }}
                            </view>
                        </picker>
                    </view>
                    <view class="txt1">至</view>
                    <view class="kdtxt">
                        <picker mode="date" :value="date1" :start="time" end="2050-09-01" @change="bindDateChange1">
                            <view class="picker" :style="date1 ? 'color:#222' : ''">
                                {{ date1 ? date1 : '请选择结束时间' }}
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="dk_qr" @tap="onConfirm">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
var util = require('../../utils/util.js');
export default {
    data() {
        return {
            cur: 0,
            price: '',
            deliver_name: '',
            deliver_num: '',
            date: '',
            date1: '',
            time: util.currentdate(),
            navBarHeight: '',
            menuRight: '',
            menuBotton: '',
            menuHeight: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        title: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: ''
        },
        totalPrice: {
            type: String,
            default: ''
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached: function () {
            const that = this;
           // #ifdef APP ||MP-WEIXIN
			   // 获取系统信息
			   const systemInfo = uni.getSystemInfoSync();
			   // 胶囊按钮位置信息
			   const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			   // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
			   this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight,
			   this.menuRight = systemInfo.screenWidth - menuButtonInfo.right,
			   this.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight,
			   this.menuHeight = menuButtonInfo.height
           // #endif
        },

        onConfirm(e) {
            if (this.date == '') {
                app.globalData.show('请选择开始时间~');
                return false;
            }
            if (this.date1 == '') {
                app.globalData.show('请选择结束时间~');
                return false;
            }
            var val = {
                date: this.date,
                date1: this.date1,
                date2: this.date + ' ~ ' + this.date1
            };
            this.$emit('onConfirm', {
                detail: val
            });
        },

        close(e) {
            this.$emit('close', {
                detail: 0
            });
        },

        bindDateChange: function (e) {
            //////console.log('picker发送选择改变，携带值为', e.detail.value)
            this.date = e.detail.value
        },

        bindDateChange1: function (e) {
            //////console.log('picker发送选择改变，携带值为', e.detail.value)
            this.date1 = e.detail.value
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    created: function () {}
};
</script>
<style>
.popup {
    width: 100%;
    height: 100vh;
    display: table;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}
.popup1 {
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
}
.popup2 {
    width: 100%;
    height: auto;
    display: table;
    position: absolute;
    bottom: 0%;
    left: 0%;
}
.popup3 {
    width: 100%;
    min-height: 200px;
    display: table;
    position: relative;
    background-color: #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-sizing: border-box;
    padding: 0px 3%;
}
.popup4 {
    width: 100%;
    min-height: 200px;
    display: table;
    position: relative;
    background-color: #fff;
    border-radius: 10px 10px 0px 0px;
    box-sizing: border-box;
    padding: 0px 10px;
}
.popup5 {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
}
.txt_up {
    width: 100%;
    height: auto;
    display: table;
    font-size: 17px;
    font-family: PingFang;
    font-weight: bold;
    color: #111111;
    line-height: 45px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}
.gb_txt {
    width: 45px;
    height: 45px;
    display: table;
    position: absolute;
    top: 0px;
    right: 0px;
}
.gb_txt > image {
    width: 15px;
    height: auto;
    display: table;
    margin: auto;
    float: right;
    margin-top: 14.5px;
}
.kd_con {
    width: 100%;
    height: 300px;
    display: table;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f7f7f8;
}
.kd_nr {
    width: 100%;
    height: auto;
    display: table;
    font-size: 14px;
    color: #868686;
    padding: 10px 0px;
    padding-top: 0px;
}
.nd_con {
    width: 100%;
    height: auto;
    display: table;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    margin-bottom: 15px;
}
.nd_con1 {
    width: 100%;
    height: auto;
    display: table;
    position: relative;
}
.nd_con1 > view:nth-child(1) {
    width: auto;
    height: 30px;
    display: table;
    float: left;
    font-size: 16px;
    color: #111111;
    line-height: 30px;
}
.nd_con1 > view:nth-child(2) {
    width: auto;
    height: 30px;
    display: table;
    float: right;
    font-size: 16px;
    color: #ff3100;
    line-height: 30px;
    font-weight: bold;
    padding-right: 35px;
}
.ys_txt {
    width: 100%;
    height: auto;
    display: flex;
    font-size: 13px;
    color: #ababab;
    line-height: 22px;
}

.ys_txt > image {
    width: 18px;
    height: auto;
    display: inline-block;
    margin: 0px 7px;
    margin-top: 3px;
}
.check_btn {
    width: 24px;
    height: 24px;
    display: table;
    position: absolute;
    top: 2px;
    right: 0px;
}
.nd_ip {
    width: 94%;
    height: 45px;
    border-radius: 5px;
    background-color: #f7f7f8;
    box-sizing: border-box;
    padding: 0px 10px;
    font-size: 15px;
    color: #333;
    margin-top: 30px;
    margin-left: 3%;
}
.dk_qr {
    width: 94%;
    height: 45px;
    display: table;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    background-color: #2d8af7;
    margin: 30px;
    margin-left: 3%;
    margin-bottom: 20px;
}

.dk_qr1 {
    width: 94%;
    height: 40px;
    display: table;
    border-radius: 5px;
    font-size: 16px;
    color: #111;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    margin-left: 3%;
    margin-top: 0px;
    margin-bottom: 20px;
}
.imglist {
    width: 100%;
    height: 95px;
    display: inline-block;
}
.imglist1 {
    width: 100%;
    height: auto;
    display: table;
}
.imglist1 {
    width: 94%;
    height: auto;
    display: table;
    margin-left: 3%;
    margin-top: 10px;
}
.imglist1 > view {
    width: 31%;
    height: 82px;
    border-radius: 5px;
    float: left;
    margin-bottom: 10px;
    margin-right: 3.5%;
    position: relative;
}
.imglist1 > view:nth-child(3n) {
    margin-right: 0px;
}
.sc_img {
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    position: relative;
}
.img_add {
    width: 30px;
    height: auto;
    display: table;
    margin: auto;
    margin-top: 25px;
}
.imgwx {
    width: 100%;
    height: 100%;
    display: table;
}
.wx_btn {
    width: 22px;
    height: auto;
    display: table;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
}
.sc_txt {
    width: 94%;
    margin-left: 3%;
    height: auto;
    display: table;
    font-size: 12px;
    color: #a7a8aa;
    line-height: 22px;
}
.conram {
    width: 100%;
    height: 120px;
    border-radius: 5px;
    background-color: #f5f6f9;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    color: #333;
}
.kdtxt {
    width: 100%;
    height: 45px;
    display: table;
    border: 0.5px solid #f3f3f3;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0px 10px;
}
.kdtxt > view:nth-child(1) {
    width: 25%;
    height: 45px;
    display: table;
    float: left;
    font-size: 16px;
    color: #111;
    line-height: 45px;
}
.kdtxt > input {
    width: 75%;
    height: 45px;
    display: table;
    float: left;
    font-size: 16px;
    color: #111;
    line-height: 45px;
}
.kdcon {
    width: 94%;
    height: auto;
    display: table;
    margin: 15px 3%;
}
.txt1 {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 16px;
    color: #222;
    line-height: 50px;
}
.picker {
    width: 100%;
    height: 45px;
    text-align: center;
    line-height: 43px;
    font-size: 15px;
    color: #999;
}
</style>
